<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>宝贝投-P2P平台</title>
<!-- links begin -->
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/core.css" type="text/css" />
<script type="text/javascript" src="js/jquery/jquery-2.1.3.js"></script>
<script type="text/javascript" src="js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.bootstrap.js"></script>
<!-- links end -->
<script type="text/javascript" src="js/plugins/jquery.twbsPagination.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.form.js"></script>
<script type="text/javascript" src="js/plugins-override.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
	<!-- 网页顶部 begin -->
	<div class="el-header"></div>
	<!-- 网页顶部 end -->

	<!-- 网页导航 begin -->
	<div class="el-navbar navbar navbar-default"></div>
	<!-- 网页导航 end -->
	
	<!-- 网页内容 -->
	<div class="container" style="min-height: 500px;">
		<h4 class="page-title">投资列表</h4>
		<form action="http://localhost:8080/finance/borrow/query" id="searchForm" method="POST">
			<div style="margin: 20px 0px;">
					<span class="text-muted">标的状态</span><div style="margin-left: 30px" class="btn-group" data-toggle="buttons">
				  <label class="btn btn-default active">
				    <input type="radio" name="borrowState" value="20,30,40,50" autocomplete="off" checked />&emsp;全部&emsp;
				  </label>
				  <label class="btn btn-default">
				    <input type="radio" name="borrowState" value="20,30" autocomplete="off" />&emsp;招标中&emsp;
				  </label>
				  <label class="btn btn-default">
					<input type="radio" name="borrowState" value="40" autocomplete="off" />&emsp;还款中&emsp;
				  </label>
				  <label class="btn btn-default">
				    <input type="radio" name="borrowState" value="50" autocomplete="off" />&emsp;已完成&emsp;
				  </label>
				</div>
			</div>
		</form>
		<table id="tblBorrow" class="table el-table table-hover">
			<thead>
				<tr>
					<th>借款人</th>
					<th width="380px">借款标题</th>
					<th>年利率</th>
					<th>借款金额</th>
					<th>还款方式</th>
					<th>进度</th>
					<th></th>
					<th width="80px">操作</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		<div id="divPagination" style="text-align: center;">
			<ul id="pagination" class="pagination"></ul>
		</div>
	</div>

	<!-- 页脚 begin -->
	<div class="container-foot-2"></div>
	<!-- 页脚 end -->
</body>
<script type="text/javascript">

// 查询条件对象
let queryObject = new Object();
queryObject.borrowStates = BORROW_STATE_CONST.BIDDING + ',' + BORROW_STATE_CONST.LOAN_PENDING + ',' + BORROW_STATE_CONST.REPAYMENT + ',' + BORROW_STATE_CONST.REPAYMENT_CLEARED;

$(function() {

    // 加载公共顶部模板
    $('.el-header').load('tpl-head.html');

    // 加载网站导航栏模板
    $('.el-navbar').load('tpl-navbar.html');

    // 加载左侧菜单栏模板
    $('.el-leftmenu').load('tpl-leftmenu.html');

    // 加载页脚模板
    $('.container-foot-2').load('tpl-footer.html');

    // '借款状态' 单选按钮事件
	$('#searchForm [name=borrowState]').change(function () {

        // 封装查询请求数据
        let borrowStates = $(this).val();
        queryObject.borrowStates = borrowStates;
        queryObject.currentPage  = 1;

        // 加载'借款审核'数据
        loadBorrow();

    });// change();

    // 加载'借款记录'
    loadBorrow();

});// $(function());

/** 加载'借款记录'数据 **/
function loadBorrow(){

    // 加载'充值记录'数据
    $.post('http://localhost:8080/finance/borrow/query', queryObject, function (result) {

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            $.messager.alert(result.msg);
            return;
        }

        // 如果返回的数据响应码为200
        // 就进行表格数据填充
        let pageResult = result.data;

        // 将分页集合赋值给全局变量
        borrowList = pageResult.listData;

        // 填充表格数据
        fillBorrowTable( pageResult.listData );

        // 初始化分页插件
        $("#pagination").remove();
        $("#divPagination").append('<ul id="pagination" class="pagination"></ul>');

        $("#pagination").twbsPagination({
            totalPages: pageResult.totalPage,
            visiblePages: 10,
            startPage: pageResult.currentPage,
            first: '首页',
            last: '最后一页',
            prev: '上一页',
            next: '下一页',
            onPageClick:function( event, page ){
                // 加载指定页码数据
                queryObject.currentPage = page;
                loadBorrow();

            }// onPageClick();

        });// $("#pagination").twbsPagination();

    });// $.post();

}// loadBorrow();

/** 填充表格数据 **/
function fillBorrowTable( listData ) {

    // 清空表格数据
    $('#tblBorrow tbody').empty();

    // 如果没有集合数据，就直接返回
    if( !listData || listData.length == 0 ){
        // 设置没有数据提示
        $('#tblBorrow tbody').html('<tr><td colspan="8" align="center"><p class="text-danger">暂时没有标的信息</p></td></tr>');
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < listData.length; i++ ) {

        let borrow = listData[i];

        let tdBorrowUsername = '<td>' + borrow.borrowUsername + '</td>';
        let tdTitle = '<td>' + borrow.title + '</td>';
        // 年化利率
        let tdYearRate = '<td>' + borrow.yearRate + '%</td>';
        // 借款金额
        let borrowAmount = borrow.borrowAmount / MONEY_UNIT;
        let tdBorrowAmount = '<td>' + borrowAmount + '元</td>';
		// 还款方式
        let tdRepaymentType = '<td>' + REPAYMENT_TYPE[borrow.repaymentType] + '</td>';
        // 投标进度
        let bidPercent = (borrow.currentBidAmount / borrow.borrowAmount) * 100;
        let tdBidProgress = '<td><div class="progress" style="margin-bottom: 0px;"><div id="bidProgress" style="width: ' + bidPercent + '%;" class="progress-bar progress-bar-info progress-bar-striped"></div></div></td>';
        let tdBidPercent = '<td>' + bidPercent + '%</td>';

        // 如果投标进度不为'招标中',说明该标的已经不在招标进行中了，
        // 就显示投标状态
        if( borrow.borrowState != BORROW_STATE_CONST.BIDDING )
            tdBidPercent = '<td>' + BORROW_STATE[borrow.borrowState] + '</td>';

        // '查看'按钮
		let tdEdit = '<td><a target="_blank" class="btn btn-danger btn-sm" href="borrow-info.html?id=' + borrow.id + '">查看</a></td>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblBorrow tbody').append('<tr>' + tdBorrowUsername + tdTitle + tdYearRate + tdBorrowAmount + tdRepaymentType + tdBidProgress + tdBidPercent + tdEdit + '</tr>');

    }// for();

}// fillBorrowTable( listData );

</script>
</html>